<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="addOneTodo"/>
  </div>
</template>

<script>
export default {
  name: "Header",
  props:['addTodo'],
  methods:{
    addOneTodo(e){
      const title = e.target.value.trim()
      if(!title)return alert('请输入标题！')
      this.addTodo({id:Math.random().toString(36).slice(2),title,done:false})
      e.target.value = ''
    }
  }
}
</script>

<style scoped>
@import url('@/assets/css/Header.css');
</style>